<template>
  <a-modal title="用户详情" :after-close="reset" width="1200px" @ok="submit">
    <div v-if="form" class="acea-row row-middle border_bottom pb-24">
      <div class="avatar mr20"><img :src="form.user.avatar"></div>
      <div class="dashboard-workplace-header-tip">
        <p class="dashboard-workplace-header-tip-title" v-text="form.user.nickname || '-'" />
        <div class="dashboard-workplace-header-tip-desc">
          <span class="dashboard-workplace-header-tip-desc-sp pb-1">余额: {{ form.balance }}</span>
          <span class="dashboard-workplace-header-tip-desc-sp pb-1">总计订单: {{ form.allOrderCount }}</span>
          <span class="dashboard-workplace-header-tip-desc-sp pb-1">总消费金额: {{ form.allConsumeCount }}</span>
          <span class="dashboard-workplace-header-tip-desc-sp">积分: {{ form.integralCount }}</span>
          <span class="dashboard-workplace-header-tip-desc-sp">本月订单: {{ form.mothOrderCount }}</span>
          <span class="dashboard-workplace-header-tip-desc-sp">本月消费金额: {{ form.mothConsumeCount }}</span>
        </div>
      </div>
    </div>
    <a-row :gutter="10" class="ivu-mt mt20 mb20">
      <a-col :span="4">
        <a-menu v-model:selectedKeys="selectedKeys" class="a-menu-vertical-demo" @select="changeType">
          <a-menu-item v-for="(item, index) in USER_RECORD" :key="index" :value="item.value">
            {{ item.label }}
          </a-menu-item>
        </a-menu>
      </a-col>
      <a-col :span="20">
        <g-table ref="tableRef" :columns="columns" :api="infobyconditionApi" :params="searchParams" />
      </a-col>
    </a-row>
    <g-table ref="scoretableRef" :columns="scorecolumns" :api="integralListApi" :params="searchParams" />
  </a-modal>
</template>

<script setup lang="tsx">
import { userAddup, userinfo, infobyconditionApi, integralListApi } from './api';
import { userDetail, type Iuser, type IuserDetail } from './entity';
import { validReg } from '@/utils/validate';
import { USER_RECORD } from '@/utils/constant';
const props = withDefaults(defineProps<{
  data: Partial<Iuser>
}>(), {
})
const { formRef, submit, close } = useDialog({ validCallback: save })
let selectedKeys = computed(() => [searchParams.type])
const searchParams = reactive({
  type: "0",
  userId: 0
});
const { tableRef: scoretableRef, columns: scorecolumns, search: scoeQuery } = useTable<IuserDetail>([
  { title: "ID", width: 100, dataIndex: "id" },
  {
    title: '来源/用途',
    width: 100, dataIndex: 'title',
  },
  {
    title: '积分变化',
    width: 100, dataIndex: 'integral',
  },
  {
    title: '变化后积分',
    width: 100, dataIndex: 'balance',
  },
  {
    title: '日期',
    width: 100, dataIndex: 'updateTime',
  },
  {
    title: '备注',
    width: 100, dataIndex: 'mark',
  }
]);
const { tableRef, columns, search } = useTable<IuserDetail>([
  { title: "ID", width: 100, dataIndex: "id" },
  {
    title: '订单ID',
    width: 100, dataIndex: 'orderId',

  },
  {
    title: '收货人',
    width: 100, dataIndex: 'realName',

  },
  {
    title: '商品数量',
    width: 100, dataIndex: 'totalNum',

  },
  {
    title: '商品总价',
    width: 100, dataIndex: 'totalPrice',

  },
  {
    title: '实付金额',
    width: 100, dataIndex: 'payPrice',

  },
  {
    title: '交易完成时间',
    width: 100, dataIndex: 'payTime',

  },
  // 2
  {
    title: '动作',
    width: 100, dataIndex: 'title',

  },
  {
    title: '获得积分',
    width: 100, dataIndex: 'number',

  },
  {
    title: '签到时间',
    width: 100, dataIndex: 'createTime',

  },
  {
    title: '备注',
    width: 100, dataIndex: 'title',

  },
  // 3
  {
    title: '优惠券名称',
    width: 100, dataIndex: 'name',

  },
  {
    title: '面值',
    width: 100, dataIndex: 'money',

  },
  {
    title: '有效期',
    width: 100, dataIndex: 'endTime',

  },
  {
    title: '最低消费额',
    width: 100, dataIndex: 'minPrice',

  },
  {
    title: '兑换时间',
    width: 100, dataIndex: 'updateTime',

  },
  // 4
  {
    title: '变动金额',
    width: 100, dataIndex: 'number',

  },
  {
    title: '变动后',
    width: 100, dataIndex: 'balance',

  },
  {
    title: '类型',
    width: 100, dataIndex: 'title',

  },
  {
    title: '创建时间',
    width: 100, dataIndex: 'add_time',

  },
  {
    title: '备注',
    width: 100, dataIndex: 'mark',

  },

  // 5
  {
    title: 'ID',
    width: 100, dataIndex: 'uid',

  },
  {
    title: '昵称',
    width: 100, dataIndex: 'nickname',

  },
  {
    title: '等级',
    width: 100, dataIndex: 'level',

  },
  {
    title: '加入时间',
    width: 100, dataIndex: 'createTime',

  }
]);
let form = $ref(new userDetail())
watchEffect(() => {
  if (props.data.uid) {
    searchParams.userId = props.data.uid
    userinfo(props.data.uid).then(res => {
      form.setProps(res)
    })
  }
})
function changeType(params: any) {
  searchParams.type = params.key
  search(false)
}

const rules = {
  userName: [validReg('required', '请输入用户名')]
}

onMounted(() => {
  scoeQuery(false)
})
const emit = defineEmits(['change'])
function save() {
  userAddup(form).then(() => {
    AntMessage.success('保存成功')
    close()
    emit('change')
  })
}

function reset() {
  form = new userDetail()
}
</script>
<style scoped lang="scss">
.avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  margin-left: 18px;

  img {
    width: 100%;
    height: 100%;
  }
}

.dashboard-workplace {
  &-header {
    &-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      margin-right: 16px;
      font-weight: 600;
    }

    &-tip {
      width: 82%;
      display: inline-block;
      vertical-align: middle;
      margin-top: -12px;

      &-title {
        font-size: 13px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
        line-height: 18px;
        padding: 10px 0 10px;
      }

      &-desc {
        &-sp {
          width: 32%;
          color: #17233D;
          font-size: 13px;
          display: inline-block;
        }
      }
    }

    &-extra {
      .ivu-col {
        p {
          text-align: right;
        }

        p:first-child {
          span:first-child {
            margin-right: 4px;
          }

          span:last-child {
            color: #808695;
          }
        }

        p:last-child {
          font-size: 22px;
        }
      }
    }
  }
}

.pb-1 {
  padding-bottom: 10px;
}

.mr20 {
  margin: 0 20px;
}

.border_bottom {
  border-bottom: 1px solid #E7EAEC;
}

.pb-24 {
  padding-bottom: 24px;
}
</style>
